<template>
    <div>
        <el-button type="primary" icon="el-icon-arrow-left" @click="bank">上一页</el-button>
        <h2>职位列表</h2>
        <div class="box">

            <el-button type="primary" @click="addd = true">新增简历</el-button>
            <el-button type="primary" style="margin-left: -1px;" @click="dialogFormVisible = true">提醒规则</el-button>
            <i class="el-icon-s-fold" style="margin-top: 10px;margin-left: 10px;"></i>
        </div>
        <div class="first">

            <div class="one_box">
                <div class="first_one" style="margin-left:40px;">岗位名称</div>
                <div class="first_one">所属机构</div>
                <div class="first_one">缺少人口</div>
                <div class="first_one">收到简历</div>
                <div class="first_one">人事审查</div>
                <div class="first_one">业务审查</div>
                <div class="first_one">添加人</div>

                <div class="first_one" style="width: 80px;">操作</div>
            </div>
        </div>
        <div class="two" v-for="(item, index) in zzy" :key="index">

            <div class="two-two">
                <div class="two_box" style="margin-left: 90px;">{{ item.positionName }}</div>
                <div class="two_box" style="margin-left: -10px;">{{ item.department }}</div>
                <div class="two_box" style="margin-left: 5px;">{{ item.shortageOfPopulation }}</div>
                <div class="p_box" style="margin-left: -10px;">{{ item.receivedResumes }}</div>
                <div class="pp_box" style="margin-left:10px;">{{ item.hrReview }}</div>
                <div class="ppp_box" style="margin-left: 15px;width: 80px;flex-shrink: 0;">{{ item.businessReview }}
                </div>
                <div class="ppp_box" style="margin-left: 50px;">{{ item.addPeople }}</div>
                <template>

                    <el-button slot="reference" style="margin-top: -8px;margin-left: -15px;height: 30px;"
                    @click="handleEditClick(item) ">修改</el-button>
                    <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delfirst">
                        <el-button slot="reference"
                            style="margin-top: -15px;margin-left: 5px;height: 30px;" @click="del(item)">删除</el-button>
                    </el-popconfirm>
                </template>
            </div>
        </div>
        <div>
            <el-dialog title="提醒规则设置" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <div class="tan">
                        <img class="tan_tu" src="../../assets/img/add.png" alt="">
                        <img class="tan_tu" src="../../assets/img/jian.png" alt="">
                    </div>
                    <div class="tan_one">
                        <div class="tan_one_one">
                            <div>ID</div>
                            <div>动作名称</div>
                            <div>动作类型</div>
                            <div>动作说明</div>
                            <div>是否启用</div>
                        </div>
                    </div>



                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>



        <el-dialog title="新增" :visible.sync="addd" style="width: 150%;margin-left: -270px;; ">
            <el-form>
                <div class="people">
                    <h3 style="font-size: 20px;margin-left: -20px;">添加岗位需求</h3>
                    <div class="name">
                        <span>岗位名称</span>
                        <el-input v-model="jobName" placeholder="请输入内容"></el-input>
                    </div>

                    <div class="phone2">
                        <div class="phone-one">所属机构</div>
                        <el-input v-model="agency" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="phone1">
                        <div class="phone-one">缺少人口</div>
                        <el-input v-model="shortage" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="phone2">
                        <div class="phone-one">提交人</div>
                        <el-input v-model="submitter" placeholder="请输入内容"></el-input>
                    </div>


                </div>
            </el-form>
            <div slot="footer" class="dialog-footer" style="margin-top: -50px;">
                <el-button @click="addd = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </div>
        </el-dialog>




        <el-dialog title="修改" :visible.sync="updatexinxi" style="width: 150%;margin-left: -270px;">
            <el-form >
                <div class="people">
                    <h3 style="font-size: 20px;margin-left: -20px;">修改岗位需求</h3>
                    <div class="phone1">
                        <div class="phone-one">缺少人数</div>
                        <el-input v-model="phone_one" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="phone2">
                        <div class="phone-one">修改人</div>
                        <el-input v-model="phone_two" placeholder="请输入内容"></el-input>
                    </div>


                </div>
            </el-form>
            <div slot="footer" class="dialog-footer" style="margin-top: -50px;">
                <el-button @click="updatexinxi = false">取 消</el-button>
                <el-button type="primary" @click="updatexin">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
import { SelectTalent, AddTalent,UpdataTalent,DeleteTalent } from "../../api/share"
export default {
    data() {
        return {
            phone_one:null,
            phone_two:null,
            input: '',
            value: true,
            radio: '1',
            textarea: "",
            zzy: [],
            dialogTableVisible: false,
            dialogFormVisible: false,

            addd: false,
            updatexinxi: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },

            jobName: '',
            agency: '',
            shortage: '',
            submitter: '',
            formLabelWidth: '120px',
            talentId:null,
            delID:null,
            deluser:"赵泽煜",
        }
    },
    mounted() {
        this.SelTalent();
    },
    // updated(){
    //     this.SelTalent();
        
      
    // },
    methods: {
      
        del(item){
           this.delID=item.talentId
        },
        delfirst(){
            DeleteTalent(this.delID,this.deluser).then(res=>{
                console.log(res);
            }).then(err=>{
                console.log(err);
            })
        },
        updatexin(){
            this.updatexinxi=false,
            UpdataTalent(this.talentId,this.phone_one,this.phone_two,).then(res=>{
                console.log(res);
                this.phone_one=null;
                this.phone_two=null;
                this.SelTalent();
            })
        },
        handleEditClick(item){
            this.updatexinxi=true;
            console.log(item);
            this.talentId=item.talentId
            
        },
        SelTalent() {
            SelectTalent().then(res => {
                console.log(res);
                this.zzy = res.result
                console.log(this.zzy);

            })
        },
        bank() {
            this.$router.push("/pay/Order");
        },
        handleConfirm() {
            this.addd = false;
            AddTalent(this.jobName, this.agency, this.shortage, this.submitter).then(res => {
                console.log(this.forma);
                console.log(res);
                this.SelTalent();
            })
        },
       
    },


}
</script>

<style>
h2 {
    width: 100px;
    margin-left: 550px;
    margin-top: -30px;
}

.box {
    display: flex;
    width: 350px;
    margin-top: -62px;
    margin-left: 900px;
    display: flex;
    justify-content: space-evenly;
}

.first {
    width: 1240px;
    height: 60px;

    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;
}

.first_one {
    width: 110px;
    height: 60px;
    line-height: 60px;
    flex-shrink: 0;
    margin-left: 13px;

}

.two {
    width: 1240px;
    height: 40px;

    margin-top: 10px;
    display: flex;

}

.two_box {
    width: 155px;
    height: 40px;
    flex-shrink: 0;
    line-height: 40px;
    margin-left: 55px;
}

.two-two {
    width: 1186px;
    height: 40px;
    display: flex;

    margin-left: 20px;
    flex-shrink: 0;
}

.one_box {
    width: 1186px;
    height: 60px;
    display: flex;

    margin-left: 20px;
    flex-shrink: 0;
    justify-content: space-evenly;

}

.block {
    margin-left: 800px;

}

.tan_tu {
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

.tan {
    width: 60px;
    display: flex;
    margin-top: -30px;
    margin-left: 650px;
}

.tan_one {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
}

.tan_one_one {
    width: 90%;
    margin-left: 5%;
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    line-height: 40px;
}

.people {
    width: 1000px;
    height: 300px;
    margin-left: 50px;
    margin-top: -45px;
}

.name {
    width: 400px;
    height: 50px;
    flex-wrap: wrap;
    display: flex;
    font-size: 18px;
}

.a {
    width: 15px;
    height: 15px;
    margin-top: 10px;
}

.sex {
    width: 150px;
    height: 50px;
    display: flex;
    margin-left: 400px;
    margin-top: -30px;
}

.sex-one {
    width: 50px;
    height: 30px;
    flex-shrink: 0;
    margin-top: -20px;
    font-size: 18px;
    margin-left: 80px;
}

.phone {
    width: 400px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}

.phone1 {
    width: 400px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    /* margin-left: 350px; */
}

.phone2 {
    width: 400px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: -55px;
    margin-left: 530px;
}

.phone-one {
    height: 20px;
    flex-shrink: 0;
    font-size: 18px;
}

.email {
    width: 400px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: 480px;
    margin-top: -55px;
}

.up {
    width: 880px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.el-upload-dragger {
    width: 880px;
    height: 30px;
    flex-shrink: 0;
}

.el-icon-upload {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.el-upload__text {
    margin-top: -28px;

}

.userid {
    width: 400px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
}

.el-input__inner {
    margin-top: 5px;
}

.p_box {
    width: 140px;
    margin-left: 15px;
}

.pp_box {
    width: 140px;
    margin-left: 30px;
}

.ppp_box {
    width: 100px;
    margin-left: 25px;
}

.tijiao {
    width: 400px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}

.tijiao1 {
    width: 400px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: -55px;
    margin-left: 480px;

}
</style>